{% extends "sign_base.html" %}
{% load static %}

{% block style %}
    <style>
        .btn {
            text-decoration: none; /* 去掉下划线 */
        }

        .btn:hover {
            text-decoration: none; /* 去掉下划线 */
            color: #ff0000; /* 注册按钮在鼠标悬停时的样式，可以根据需要进行修改 */
        }
    </style>
{% endblock %}

{% block sign %}
        <form name="form1" method="post" action="/user/signin/">
        {% csrf_token %}
        <div class="wrap">
            <div class="form">
                <div class="left">
                    <video src={% static "bg.mp4" %} muted loop autoplay></video>
                </div>
                <div class="right">
                    <div class="right-con">
                        <h1>招 聘 登 陆</h1>
                        <h3>用 户 名</h3>
                        <input class="text" type="text" name="user_name">
                        {{ forms.errors.user_name }}
                        <h3>密 码</h3>
                        <input class="text" type="password" name="password">
                        {{ forms.errors.password }}
                        <input class="btn" type="submit" value="登录">
                        <a href="/user/signup/" class="btn">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        function getCSRFToken() {
            var name = 'csrftoken';
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    return decodeURIComponent(cookie.substring(name.length + 1));
                }
            }
            return null;
        }

        function sendSMSCode() {
            var mobile_phone = document.getElementsByName("mobile_phone")[0].value;
            if (!mobile_phone) {
                alert("请填写手机号码");
                return;
            }

            // 获取CSRF令牌
            var csrfToken = getCSRFToken();

            // 发送 AJAX 请求到后端，触发发送短信验证码的功能
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/user/send_sms_code/");
            xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
            xhr.setRequestHeader("X-CSRFToken", csrfToken); // 添加CSRF令牌到请求头
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("短信验证码已发送，请注意查收");
                        document.querySelector(".send-code-btn").style.color = "#ff0000";
                    } else {
                        alert("短信验证码发送失败，请稍后重试");
                    }
                }
            };
            xhr.send(JSON.stringify({"mobile_phone": mobile_phone}));
        }
    </script>

{% endblock %}
